<!DOCTYPE HTML>
<html>
<head>
<meta charset="iso-8859-1">
<title>Is shackspace open?</title>

<link rel="stylesheet" type="text/css" href="jquery/jquery.mobile-1.0b1.min.css" />
<!-- <script src="/usr/palm/frameworks/mojo/mojo.js" type="text/javascript" x-mojo-version="1"></script> -->
<!-- <script src="/usr/palm/frameworks/enyo/enyo.js" type="text/javascript"></script> -->

<script src="jquery/jquery-1.6.1.min.js" type="text/javascript"></script>
<script src="jquery/jquery.mobile-1.0b1.min.js" type="text/javascript"></script>


<link rel="stylesheet" type="text/css" href="custom.css" />

</head>
<body>
	<script type=text/javascript>
 $(document).ready(function() {
 	//this is needed if you don't make use of mojo
 	//improves startup time by 300%
   if (window.PalmSystem) {
        window.PalmSystem.stageReady();
    }

 });
 


// start the query asap
 getStatus();




// earlier the loading animation can't be called
$('#Shack').live('pageshow',function(event){
	//start loading animation
	$.mobile.showPageLoadingMsg();
  
  	// bind getStatus function to the refresh button
	$("#refresh").click(function() {
		getStatus();
	});
});



function getStatus() {
	try {
		// ok so I created a middleman script to pull the status from 
		// http://shackspace.de/sopen/text/en that only returns the status as json

		//start loading animation
		$.mobile.showPageLoadingMsg();

		// Fire off AJAX request.
		$.ajax({
			// Define AJAX properties.
			method: "get",
			url: "http://excogitation.de/json/shackspace.php?jsoncallback=?",
			dataType: "json",
			timeout: (3000),	// if the status isn't received after 3s assume there's a problem with the internet connection
	
			// Define the succss method.
			success: function(objAJAXRequest) {
				//stop the loading animation
				$.mobile.hidePageLoadingMsg();
				
				// returned data is either: open || closed || error
				switch (objAJAXRequest.data) {
					case "open":
						$( "#status" ).html('<img class="status" src="images/shack_open.png" width="64" height="64" />');
						$( "#status" ).append('<p>shackspace is open</p>');
						break;
					case "closed": 
						$( "#status" ).html('<img class="status" src="images/shack_closed.png" width="64" height="64" />');
						$( "#status" ).append('<p>shackspace is closed</p>');
						break;
					case "error":
						$( "#status" ).text("status monitor script returns unexpected data");
						break;
					default:
						$( "#status" ).text("shackspace php script seems broken");
				}
			},
			// Define the error method.
			error: function( objAJAXRequest, strError ) {
				//stop the loading animation
				$.mobile.hidePageLoadingMsg();
				
				$( "#status" ).html( "AJAXRequest Error! Type: <br />" + strError );
			}
		});
		
	}
	catch(e) {
		$('#status').html("There was an error getting the status.");
	}

};

	
</script>

<div data-role="page" data-theme="a" id="Shack">
	<div data-role="header" data-position="fixed">
		<h1>Shackspace</h1>
	</div>
	<div data-role="content">
		<p>
			Tell me ... is shackspace open?
		</p>
		<p id="status">
		</p>

		<div data-inline="true">
			<a href="#" id="refresh" data-role="button" data-icon="refresh">refresh</a>
		</div>

	</div>

</div>

</body>
</html>